const gulp = require("gulp");
//定义一个任务
gulp.task("hi",function(){
	console.log("hello");
})

//压缩CSS代码
const CleanCss = require("gulp-clean-css");

gulp.task("minify-css",function(){
	//导入要处理的CSS文件
	gulp.src("src/css/*.css")          //**代表任意文件夹
	//压缩CSS代码
			.pipe(CleanCss())
			.pipe(gulp.dest("dist"))
	//dist--输出的意思
})

/* 复制html */
gulp.task("copy-html",function(){
	//导入要压缩的html文件
	gulp.src("src/*.html")
			.pipe(gulp.dest("dist/"))
})


/* 监听网页修改，热更新 */
const browserSync = require('browser-sync').create();
/* 引入gulp-sass，将scss编译成css */
const sass=require("gulp-sass");
/* 自动添加-webkit前缀(浏览器兼容前缀) */
const autoprefixer = require('gulp-autoprefixer');
/* 抑错，当scss编写有错时会抑制错误并且提示，不会结束线程 */
const plumber = require('gulp-plumber');

// 静态服务器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        },
		port:8888
    });
	/* 监听html文件并实时更新 */
	gulp.watch(["src/*.html","/*.html"]).on("change",browserSync.reload);
	/* 监听scss文件并实时更新 */
	gulp.watch("src/scss/*.scss",["sass"]).on("change",browserSync.reload);
});



gulp.task("sass",function(){
	gulp.src("src/scss/*.scss")
		.pipe(plumber())   /* 抑错*/
		.pipe(sass())     /* 编译css*/
		.pipe(autoprefixer({           /* 自动加浏览器兼容前缀*/
			browsrs:['since 2010'], /*重要配置详见下...(以2010年以后的浏览器兼容标准为准，可以不指定) */
			cascade:false    /* 是否美化属性值*/
		}))
		.pipe(plumber.stop())    /* 抑错*/
		.pipe(gulp.dest("src/css/"))   /* 输出编译好的css*/ 	
})


//  /* 自动添加css前缀*/
// const autoprefixer = require('gulp-autoprefixer');
// /* 引入glup sass */
// const sass=require("gulp-sass");
// /* 将scss编译成css */
// gulp.task("sass",function(){
// 	gulp.src("src/scss/**/*.scss")
// 	.pipe(sass())
// 	.pipe(autoprefixer())
// 	.pipe(gulp.dest("src/css/"))
// })
